<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">
    我是Daddy:{{ daddyName }}
    <child v-if="isCreated"></child>
  </div>

  <!-- 尔曹身与名俱灭，不废江河万古流 -->

  <script type="text/javascript">

    Vue.component("child", {
      template: `<div id="aaa">
            child--{{title}}
            <button @click="title='1111111'">change1</button>
            <button @click="title='2222222'">change2</button>
        </div>`,

      data() {
        return {
          title: "00000",
          datalist: [],
          count: 0,
          gsLive: true,
        }
      },

      methods: {},

      beforeCreate() {
        console.log("beforeCreate")
      },
      created() {
        console.log("created")
      },

      beforeMount() {
        console.log("beforeMount")
      },
      mounted() {
        console.log("mounted")
      },

      beforeUpdate() {
        console.log("beforeUpdate")
      },
      updated() {
        console.log("updated")
      },

      beforeDestroy() {
        console.log("beforeDestroy");
      },
      destroyed() {
        console.log("destroyed")
      }

    })

    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: true,
        daddyName: "Jack Horse",
      },

      /* 创建阶段 */
      beforeCreate() {
        console.log("root beforeCreate");
      },
      created() {
        console.log("root created");
      },

      /* 挂载阶段 */
      beforeMount() {
        console.log("root beforeMount");
      },
      mounted() {
        console.log("root mounted");
      },

      /* 更新阶段 */
      beforeUpdate() {
        console.log("root beforeUpdate");
      },
      updated() {
        console.log("root updated");
      },

      /* 销毁阶段 */
      beforeDestroy() {
        console.log("root beforeDestroy");
      },
      destroyed() {
        console.log("root destroyed");
      }

    })

    // vm.$mount("#box")
    //  vue组件 生命周期 ?
    //  vue组件的 钩子函数？
    //  vue组件的生命周期钩子函数？
  </script>
</body>

</html>